import useStores from '@/hooks/useStores';
import { theme } from 'antd';
import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';

enum pageTypes {
    react = "https://react.docschina.org/",
    vite = "https://vitejs.cn/",
    antd = "https://ant-design.antgroup.com/components/overview-cn/",
}

const IFrame: React.FC = () => {
    const location = useLocation();
    const [url, setUrl] = useState("");
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const { show_multi_tab } = useStores();

    useEffect(() => {
        setUrl(pageTypes[location.pathname.split("/")[2] as keyof typeof pageTypes])

    }, [location.pathname])
    return (
        <div style={{ background: colorBgContainer, position: "relative", height: show_multi_tab ? "calc(100vh - 212px)" : "100%", width: "100%" }}>
            <iframe style={{ height: "100%", width: "100%", position: "absolute", inset: 0, border: "none" }} src={url}></iframe>
        </div >
    )
}

export default IFrame;